<template>
	<div class="home my-app">
		<h2 class="my-h2">经营概况</h2>
		<div class="one">
			<ul>
				<li>
					<router-link class="router" style="color: #fff;" to="/OorderDetails/3">
						<p >{{indexdata.today_order_number}}</p>
						<p >今日新增订单</p>
					</router-link>
				</li>
				<li>
					<router-link class="router" to="/OorderDetails/2">
					<p style="color: #32cc7f;">{{indexdata.all_order_number}}</p>
					<p style="color: #333;">订单总数</p>
					</router-link>
				</li>
				<li>
					<router-link class="router" style="color: #fff;" to="/SGgoodsselect">
					<p>{{indexdata.product_number}}</p>
					<p>产品总数</p>
					</router-link>
				</li>
				<li>
					<router-link class="router"  to="/UserMag">
					<p style="color: #32cc7f;">{{indexdata.company_user_number}}</p>
					<p style="color: #333;">职员总数</p>
					</router-link>
				</li>
			</ul>
		</div>
		<h2 class="my-h3c home-h2">今日待核销订单</h2>
		<div class="home-table " style="margin: 0;">
			<com-table :ComTable="ComTable" @ComTablesondata="ComTablesondata"></com-table>
			<page v-if="pageshow" :page="pageList"></page>
		</div>
		<h2 class="my-h3c  home-h2">数据分析</h2>
		<h3 class=" home-h3">销售数据</h3>
		<div class="echarts1 my-form-item">
			<div class="echart-title">
				<div class="left"></div>
				<div class="nyr">
					<div v-for="(i,key,index) in tablist.list" :class="{active:tablist.isactive===i.name}" @click="nyrclick(i.name)">{{i.name}}</div>
				</div>
			</div>
			<div ref="orgOptionsline" :style="{width:'800px',height:'200px'}"></div>
		</div>
		<h3 class=" home-h3">客源地分析</h3>
		<div class="echarts1 my-form-item">
			<div class="echart-title">
				<div class="left">
					<span class="demonstration">统计周期</span>
					<el-date-picker v-model="oroptionmapjsonr_time" type="daterange" range-separator="至" start-placeholder="开始日期"
					 end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="nyr">
				</div>
			</div>
			<div class="echart-con">
				<div ref="oroptionmapjsonr" :style="{width:'400px',height:'400px'}"></div>
				<div class="list">
					<p style="text-align: left;color: #333333;margin-bottom: 5px;">客源地省份占比</p>
					<ul>
						<li>
							<span>客源地</span>
							<span>人数</span>
						</li>
						<li v-for="(item,key,index) in ltopdata" :key="index">
							<span>{{item.name}}</span>
							<span>{{item.value}}
							</span>
						</li>
					</ul>
					<page v-if="pageshow" :page="pageList" style="transform: translateY(-25px);"></page>
				</div>
			</div>
		</div>
		<h3 class="  home-h3">数据分析</h3>
		<div class="echarts1 my-form-item">
			<div class="echart-title">
				<div class="left">
					<span class="demonstration">统计周期</span>
					<el-date-picker v-model="orgOptionsbar_time" type="daterange" range-separator="至" start-placeholder="开始日期"
					 end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="nyr">
				</div>
			</div>
			<div ref="orgOptionsbar" :style="{width:'800px',height:'380px'}"></div>
		</div>

		<div class="ticket-box" v-if="ticket" @click="odetailclsoe">
			<ticket @click.native="containerfalse" @odetailclsoe="odetailclsoe" :son="true"></ticket>
		</div>
	</div>
</template>

<script>
	var ltopdata = [{
			name: '北京',
			value: 2
		},
		{
			name: '天津',
			value: 1
		},
		{
			name: '上海',
			value: 2
		},
		{
			name: '重庆',
			value: 1
		},
		{
			name: '河北',
			value: 1
		},
		{
			name: '河南',
			value: 1
		},
		{
			name: '云南',
			value: 1
		},
		{
			name: '辽宁',
			value: 1
		},
		{
			name: '黑龙江',
			value: 1
		},
		{
			name: '湖南',
			value: 1
		},
	]
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import ticket from "./OrderMag/ticket.vue"
	import chinaJson from 'echarts/map/json/china.json'
	export default {
		name: "home",
		data() {
			return {
				pageshow: false,
				tablist: {
					isactive: '年',
					list: [{
						id: 'n',
						name: "年",
					}, {
						id: 'y',
						name: "月",
					}, {
						id: 'z',
						name: "周",
					}, ]
				},
				ltopdata: ltopdata,
				oroptionmapjsonr: {
					textStyle: {
						color: "#9cbfde",
						fontSize: 10.67,
					},
					color: ['#fff'], //手动设置每个图例的颜色
					tooltip: {
						// trigger: 'item',
						formatter: function(params) {
							var percent = 0;
							var total = 0;
							for (var i = 0; i < ltopdata.length; i++) {
								if (params.name == ltopdata[i].name) {
									if (params.name !== '') {
										return params.name + '\n' + ltopdata[i].value;
									} else {
										return '';
									}
								}

							}

						},
					},
					legend: {
						show: false
					},
					toolbox: {
						show: true,
						orient: 'vertical',
						x: 'right',
						y: 'center',
					},
					roamController: {
						show: true,
						x: 'right',
						mapTypeControl: {
							'china': true
						}
					},
					series: [{
						name: 'iphoneX',
						type: 'map',
						mapType: 'china',
						roam: false,
						left: '25%',
						top: '25%',
						// zoom: 1,
						center: [115.97, 29.71],
						// aspectScale:1,
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								areaColor: '#fff',
								borderColor: '#41c7db ',
								borderWidth: 1,
							},
							emphasis: {
								areaColor: '#41c7db '
							},

						},
						data: ltopdata
					}]
				},
				pageList: {},
				ticket: false,
				ComTable: {
					header: "header5f00ff",
					title: [{
						width: '200px',
						label: '订单号',
						prop: 'order_id'
					}, {
						width: '200px',
						label: '票种/房间名称',
						prop: 'a'
					}, {
						label: '使用日期',
						prop: 'go_time',
					}, {
						width: '50px',
						label: '人数',
						prop: 'people_number',
					}, {
						width: '80px',
						label: '金额',
						prop: 'money',
					}, {
						label: '验证核销',
						prop: 'a',
						type: "btn",
						btnlist: [{
							router: true,
							id: "/Oticket",
							color: "",
							text: "验证/核销",
						}, ]
					}, ],
					tableData: [{
							a: 1,
							rowclass: "rowclass",
						},
						{
							a: 1,
							rowclass: "rowclass",
						},
					],
					multipleSelection: []
				},
				orgOptionsbar_time: '',
				oroptionmapjsonr_time: '',
				orgOptionsline: {
					textStyle: {
						color: "#9cbfde"
					},
					color: ['#2da8ff', '#ffce55', '#ec87bf'], //手动设置每个图例的颜色
					grid: {
						left: '30px',
						right: '0px',
						top: '10px',
						bottom: "30px"
					},
					xAxis: {
						type: 'category',
						boundaryGap: true,
						axisLine: {
							show: false,
							lineStyle: {
								color: "#e7e7e7"
							}
						},
						axisTick: {
							show: false
						},
						data: ['a', 'b', 'c', 'd', 'e']
					},
					yAxis: {
						type: 'value',
						boundaryGap: true,
						// 网格线
						splitLine: {
							lineStyle: {
								color: '#e7e7e7'
							}
						},
						// 坐标轴轴线样式
						axisLine: {
							show: false,
						},
						// 坐标轴刻度
						axisTick: {
							show: false
						},
					},
					series: [{
						name: 'a',
						type: 'line',
						symbol: 'circle', //拐点样式
						symbolSize: 4,
						stack: '总量1',
						lineStyle: {
							width: 1
						},
						data: [10, 40, 20, 50, 50]
					}, ]
				},
				orgOptionsbar: {


					color: ['#3398DB'],
					grid: {
						left: '3%',
						right: '4%',
						bottom: '5%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true
						},
						// 坐标轴轴线样式
						axisLine: {
							show: false
						},
					}],
					yAxis: [{
						type: 'value', // 网格线
						splitLine: {
							lineStyle: {
								color: '#e7e7e7'
							}
						},
						axisTick: {
							show: false
						},
						// 坐标轴轴线样式
						axisLine: {
							show: false,
						},
					}],
					series: [{
						name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: [10, 52, 200, 334, 390, 330, 220]
					}]
				},
			}
		},
		computed: {
			...mapGetters([
				"token",
				"indexdata",
				"page",
				"res_orderlist",
				"UserInfo_data"
			])
		},

		components: {
			ticket,
		},
		created() {
			this.UserInfo()
		},
		mounted() {
			this.echarts();
			this.getIndex();
			this.order(1);
			if (this.UserInfo_data.type === 1) {
				this.ComTable.title[1].label = "票种名称"
			}
			if (this.UserInfo_data.type === 2) {
				this.ComTable.title[1].label = "房间名称"
			}
		},
		methods: {
			...mapActions({
				setToken: 'setToken',
				getindexdata: 'getindexdata',
				getpage: 'getpage',
				getres_orderlist: 'getres_orderlist',
				getUserInfo: 'getUserInfo'
			}),
			UserInfo() {
				this.$api.GetUserInfo({
						token: this.token
					})
					.then(res => {
						if (res.code === 200) {
							this.getUserInfo(res.result)
							if (this.UserInfo_data.channel_id != undefined || this.UserInfo_data.channel_id != 0) {
								for (var i = 0; i < this.UserInfo_data.status.length; i++) {
									if (this.UserInfo_data.status[i] === '3') {
										this.$router.push('/Oticket');
									} else {
										this.$router.push('/index');
									}
								}
							}
						}
						if (res.code === 310) {
							this.$alert(res.meg, '提示', {
								confirmButtonText: '确定',
								callback: action => {
									this.$router.push("/LoginIndex");
									Cookie.Cookiedel("token")
									this.setToken("");
								}
							})

						}
					})
			},
			ComTablesondata(i) {
				if (i.btnlist.router) {
					this.$router.push(i.btnlist.id)
				}
			},
			getIndex() {
				this.$api.GetIndex({
						token: this.token
					})
					.then(res => {
						this.getindexdata(res)
					})
			},
			nyrclick(val) {
				this.tablist.isactive = val;
			},
			// 图表
			echarts() {
				var orgOptionsline_charts = this.$echarts.init(this.$refs.orgOptionsline);
				orgOptionsline_charts.setOption(this.orgOptionsline)
				this.$echarts.registerMap('china', chinaJson);
				var oroptionmapjsonr_charts = this.$echarts.init(this.$refs.oroptionmapjsonr);
				oroptionmapjsonr_charts.setOption(this.oroptionmapjsonr)
				var orgOptionsbar_charts = this.$echarts.init(this.$refs.orgOptionsbar);
				orgOptionsbar_charts.setOption(this.orgOptionsbar)
			},

			// 订单列表
			order(page) {
				var _this = this;
				_this.$api.Getorder({
						token: _this.token,
						type: 1,
						page: page
					})
					.then(res => {
						if (res.code === 200) {
							_this.getres_orderlist(res)
							_this.update()
						} else {

						}
					})
			},
			update() {
				this.tableData6 = this.res_orderlist.result.data;

				for (var i = 0; i < this.tableData6.length; i++) {
					this.tableData6['id'] = i;
				}
				this.ComTable.tableData = this.tableData6
				this.pageList = {
					total: this.res_orderlist.result.total, // String 总共数据条数
					per_page: this.res_orderlist.result.per_page, // String 每页数据条数
					current_page: this.res_orderlist.result.current_page, // String 当前第几页
					last_page: this.res_orderlist.result.last_page, // String 最后一页
				}
				this.pageshow = true;

			},
			// 阻止事件冒泡
			containerfalse(e) {
				window.event ? window.event.cancelBubble = true : e.stopPropagation();
			},
			odetailclsoe() {
				this.ticket = false;
			},
		}
	}
</script>

<style scoped lang="less">
	.home {
		.ticket-box {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1;
			box-sizing: border-box;
			overflow-y: scroll;
			background: rgba(0, 0, 0, .2);

			.Oticket {
				margin: 10px auto;
				width: 870px;
			}
		}

		text-align: left;

		.home-h2 {

			padding: 15px 0;
			box-sizing: border-box;
		}

		// 销售数据
		.echart-title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 5px 0;
			box-sizing: border-box;

			.left {
				.demonstration {
					margin-right: 5px;
				}

				width: 50%;
				line-height: 40px;
			}

			.nyr {
				display: flex;
				cursor: pointer;

				div {
					width: 40px;
					height: 20px;
					line-height: 20px;
					text-align: center;
					border-radius: 5px;
					margin-left: 5px;
					border: 1px solid #359df5;

					font-size: 12px;

					&.active {
						background: #359df5;
						color: #fff;
					}
				}
			}
		}

		// 地图
		.echart-con {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.list {
				width: 300px;
				height: 332px;
				// overflow-y: hidden;

				ul {
					height: 332px;
					border: 1px solid #e7e7e7;

					li {
						display: flex;
						border-bottom: 1px solid #e7e7e7;

						span {
							display: flex;
							padding: 5px 10px;
							box-sizing: border-box;

							&:first-child {
								width: 80px;
								border-right: 1px solid #e7e7e7;
							}

							&:last-child {
								text-align: center;
							}

							.bar-line {
								width: 165px;
								height: 100%;
								margin-left: 10px;

								.bar {
									display: block;
									background: #41c7db;
									height: 100%;

								}
							}
						}
					}
				}
			}
		}

		.home-h3 {
			padding: 15px 0;
			box-sizing: border-box;
			color: #359df5;
			position: relative;
			padding-left: 20px;
			box-sizing: border-box;

			&::after {
				content: '';
				display: block;
				width: 3px;
				height: 50%;
				background: #359df5;
				position: absolute;
				top: 25%;
				left: 0;
			}

		}

		.home-table {}

		.el-table tr {
			th {
				border: none !important;
				text-align: center;
				background: #5f00ff !important;
			}


		}

		.one {
			padding-bottom: 20px;
			box-sizing: border-box;
			border-bottom: 2px solid #bdbdbd;

			ul {
				display: flex;
				justify-content: space-between;

				.router {
					width: 100%;
					height: 100%;
					display: flex;
					flex-wrap: wrap;
					align-content: flex-end;
					box-sizing: border-box;
				}

				li {
					width: 205px;
					height: 128px;
					display: flex;
					flex-wrap: wrap;
					align-content: flex-end;
					padding: 15px;
					box-sizing: border-box;

					&:nth-of-type(1) {
						background: url('../../assets/img/index/login-home-icon1.png') no-repeat center;
						text-align: right;
						color: #fff;

					}

					&:nth-of-type(2) {
						background: url('../../assets/img/index/login-home-icon2.png') no-repeat center;
						text-align: left;

						p {
							&:nth-of-type(1) {
								color: #32cc7f;
							}
						}
					}

					&:nth-of-type(3) {
						background: url('../../assets/img/index/login-home-icon3.png') no-repeat center;
						text-align: right;
						color: #fff;
					}

					&:nth-of-type(4) {
						background: url('../../assets/img/index/login-home-icon4.png') no-repeat center;
						text-align: left;

						p {
							&:nth-of-type(1) {
								color: #6063b2;
							}
						}
					}

					p {
						width: 100%;

						&:nth-of-type(1) {
							font-size: 30px;
						}

						&:nth-of-type(2) {
							font-size: 18px;
						}
					}
				}

			}
		}
	}
</style>
